<!doctype html>
<html>

<head>
    <title>Rich Text Editor</title>
    <script type="text/javascript">
        var oDoc, sDefTxt;

        function initDoc() {
            oDoc = document.getElementById("textBox");
            sDefTxt = oDoc.innerHTML;
            if (document.compForm.switchMode.checked) { setDocMode(true); }
        }

        function formatDoc(sCmd, sValue) {
            if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); }
        }

        function validateMode() {
            if (!document.compForm.switchMode.checked) { return true; }
            alert("Uncheck \"Show HTML\".");
            oDoc.focus();
            return false;
        }

        function setDocMode(bToSource) {
            var oContent;
            if (bToSource) {
                oContent = document.createTextNode(oDoc.innerHTML);
                oDoc.innerHTML = "";
                var oPre = document.createElement("pre");
                oDoc.contentEditable = false;
                oPre.id = "sourceText";
                oPre.contentEditable = true;
                oPre.appendChild(oContent);
                oDoc.appendChild(oPre);
                document.execCommand("defaultParagraphSeparator", false, "div");
            } else {
                if (document.all) {
                    oDoc.innerHTML = oDoc.innerText;
                } else {
                    oContent = document.createRange();
                    oContent.selectNodeContents(oDoc.firstChild);
                    oDoc.innerHTML = oContent.toString();
                }
                oDoc.contentEditable = true;
            }
            oDoc.focus();
        }

        function printDoc() {
            if (!validateMode()) { return; }
            var oPrntWin = window.open("", "_blank", "width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
            oPrntWin.document.open();
            oPrntWin.document.write("<!doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>");
            oPrntWin.document.close();
        }
    </script>
    <style type="text/css">
        .intLink {
            cursor: pointer;
        }

        img.intLink {
            border: 0;
        }

        #toolBar1 select {
            font-size: 10px;
        }

        #textBox {
            width: 540px;
            height: 200px;
            border: 1px #000000 solid;
            padding: 12px;
            overflow: scroll;
        }

        #textBox #sourceText {
            padding: 0;
            margin: 0;
            min-width: 498px;
            min-height: 200px;
        }

        #editMode label {
            cursor: pointer;
        }
    </style>
</head>

<body onload="initDoc();">
    <form name="compForm" method="post" action="sample.php"
        onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;">
        <input type="hidden" name="myDoc">
        <div id="toolBar1">
            <select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;">
                <option selected>- formatting -</option>
                <option value="h1">Title 1 &lt;h1&gt;</option>
                <option value="h2">Title 2 &lt;h2&gt;</option>
                <option value="h3">Title 3 &lt;h3&gt;</option>
                <option value="h4">Title 4 &lt;h4&gt;</option>
                <option value="h5">Title 5 &lt;h5&gt;</option>
                <option value="h6">Subtitle &lt;h6&gt;</option>
                <option value="p">Paragraph &lt;p&gt;</option>
                <option value="pre">Preformatted &lt;pre&gt;</option>
            </select>
            <select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;">
                <option class="heading" selected>- font -</option>
                <option>Arial</option>
                <option>Arial Black</option>
                <option>Courier New</option>
                <option>Times New Roman</option>
            </select>
            <select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;">
                <option class="heading" selected>- size -</option>
                <option value="1">Very small</option>
                <option value="2">A bit small</option>
                <option value="3">Normal</option>
                <option value="4">Medium-large</option>
                <option value="5">Big</option>
                <option value="6">Very big</option>
                <option value="7">Maximum</option>
            </select>
            <select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;">
                <option class="heading" selected>- color -</option>
                <option value="red">Red</option>
                <option value="blue">Blue</option>
                <option value="green">Green</option>
                <option value="black">Black</option>
            </select>
            <select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;">
                <option class="heading" selected>- background -</option>
                <option value="red">Red</option>
                <option value="green">Green</option>
                <option value="black">Black</option>
            </select>
        </div>
        <div id="toolBar2">
            <img class="intLink" title="Clean"
                onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};"
                src="" />
            <img class="intLink" title="Print" onclick="printDoc();"
                src="">
            <img class="intLink" title="Undo" onclick="formatDoc('undo');"
                src="" />
            <img class="intLink" title="Redo" onclick="formatDoc('redo');"
                src="" />
            <img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')"
                src="">
            <img class="intLink" title="Bold" onclick="formatDoc('bold');"
                src="" />
            <img class="intLink" title="Italic" onclick="formatDoc('italic');"
                src="" />
            <img class="intLink" title="Underline" onclick="formatDoc('underline');"
                src="" />
            <img class="intLink" title="Left align" onclick="formatDoc('justifyleft');"
                src="" />
            <img class="intLink" title="Center align" onclick="formatDoc('justifycenter');"
                src="" />
            <img class="intLink" title="Right align" onclick="formatDoc('justifyright');"
                src="" />
            <img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');"
                src="" />
            <img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');"
                src="" />
            <img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');"
                src="" />
            <img class="intLink" title="Delete indentation" onclick="formatDoc('outdent');"
                src="" />
            <img class="intLink" title="Add indentation" onclick="formatDoc('indent');"
                src="" />
            <img class="intLink" title="Hyperlink"
                onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}"
                src="" />
            <img class="intLink" title="Cut" onclick="formatDoc('cut');"
                src="" />
            <img class="intLink" title="Copy" onclick="formatDoc('copy');"
                src="" />
            <img class="intLink" title="Paste" onclick="formatDoc('paste');"
                src="" />
        </div>
        <div id="textBox" contenteditable="true">
            <p>Lorem ipsum</p>
        </div>
        <p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" />
            <label for="switchBox">Show HTML</label></p>
        <p><input type="submit" value="Send" /></p>
    </form>
</body>

</html>